<!-- Dom模板 -->
<template>
  <div class="imgMessage">
    <div class="chunk">
      <div class="messageImg">
        <p></p>
        <h2>商品细节</h2>
      </div>
      <p></p>
    </div>

    <div class="messageImg column">
      <img v-for="(item, index) in imgss" :key="index" :src="item" alt="" />
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  props: {
    imgss: {
      type: Array,
      default: [],
    },
  },
  // props:['imgss'],
  name: "",
  data() {
    return {
      msg: "测试",
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {},
};
</script>

<style lang='scss' scoped>
/* @import url(''); 引入css类 */
.imgMessage {
  width: 98%;
  margin: 0 auto;
  
  .chunk {
    height: 90px;
    border-bottom: 1px solid grey;
    padding-bottom: 35px;
    position: relative;
    // overflow: hidden;
    > p {
      background:white;
      border-top: 1px solid grey;
      border-left: 1px solid grey;
      transform: rotate(45deg);
      width: 50px;
      height: 50px;
      position: absolute;
      left:calc((100% - 900px)/2);
      bottom:-26px;
    }
  }
  .messageImg {
    width: 900px;
    margin: 0 auto;

    img {
      width: 100%;
    }
    p {
      width: 50px;
      border-bottom: 5px solid black;
      margin-bottom: 10px;
    }
  }
}
h2{
  font-size:30px;
  font-weight: 500;
}
</style>